class MyVue {
    constructor(options) {
        this.$data = options.data
        observe(options.data)
    }
}
class Dep {
    constructor() {
        this.subs = []
    }
    addSub(watcher) {
        this.subs.push(watcher)
    }
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}
class Watcher {
    update() {
        console.log('我更新啦');
    }
}
function observe(data) {
    let keys = Object.keys(data)
    for(let i = 0; i < keys.length; i++) {
        defineReactive(data, keys[i], data[keys[i]])
    }
}
function defineReactive(obj, key, val) {
    const dep = new Dep()
    Object.defineProperty(obj, key, {
        get() {
            dep.addSub(watcher)
            return val
        },
        set(newVal) {
            if(newVal !== val) {
                dep.notify()
            }
            val = newVal
        }
    })
}
const vue = new MyVue({
    data: {
        name: 'zzy',
        age: 'hhh'
    }
})
const watcher = new Watcher()
console.log(vue.$data.name);
vue.$data.name = 'iii'